<!--
*@Author: QWP
*@Description: 编辑列表
*@Date: 2023-06-18 12:29:19
-->
<!--
*@Author: QWP
*@Description: 
*@Date: 2024-07-03 13:33:46
-->
<template>
  <a-layout class="u-edit-table-box">
    <a-layout-header class="f-h-auto" 
      style="background-color: #fff; padding: 0; line-height: 40px;">
      <a-space>
        <template v-if="!check">
          <u-icon-button @click="addDelete(1)" v-if="addBtn" class="f-margin-b16">{{addText}}</u-icon-button>
          <u-icon-button @click="addDelete(2)" v-if="deleteBtn" class="f-margin-b16">{{deleteText}}</u-icon-button>
          <!-- <u-icon-button @click="showUpload = true" v-if="uploadBtn" class="f-margin-b16">{{uploadText}}</u-icon-button> -->
        </template>
        <slot></slot>
      </a-space>
    </a-layout-header>
    <a-layout-content>
      <a-table
        :columns="columns"
        :data-source="data"
        :rowKey="props.rowKey"
        :pagination="$attrs['pagination'] || false"
        :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
        :scroll="scroll"
        :loading="loading"
        v-bind="$attrs"
        bordered>
        <template #bodyCell="{ column, text, index, record }">
          <template v-if="!['index'].includes(column.dataIndex)">
            <component 
              :is="componentsMap[column.element]"
              v-model:value="record[column.dataIndex]" 
              v-bind="{ ...editsProps(column, index ), ...(column.componentProps || {}) }"
              :disabled="isDiabled(column)"
              @click="setCellEdit(column, index )"
              @focus="emits('focus', column.dataIndex, index)"
              @change="emits('editChange', { key: column.dataIndex, value: record[column.dataIndex], row: record, index, column })"/>
          </template>
        </template>
      </a-table>
    </a-layout-content>
  </a-layout>

  <!-- <u-upload v-model:open="showUpload"></u-upload> -->
</template>

<script lang="ts" setup>
defineOptions({
  name: "u-edit-table"
})
import { ref, reactive, UnwrapRef  } from "vue";
import { componentsMap } from "./config.ts";
import { cloneDeep } from 'lodash-es';
interface Props {
  data: Array
  columns: Array,
  rowKey?: string,
  addText?: string,
  addBtn?: boolean,
  deleteText?: string,
  deleteBtn?: boolean,
  uploadText?: string,
  uploadBtn?: boolean,
  check?: boolean,
  scroll?: object,  
  loading?: boolean | object, 
}
const props = withDefaults(defineProps<Props>(), {
  data: [],
  rowKey: 'keyid',
  addText: '新增行',
  addBtn: true,
  deleteText: '删除行',
  deleteBtn: true,
  uploadText: '附件上传',
  uploadBtn: false,
  check: false
})

const emits = defineEmits(['focus', 'editChange']);

type Key = number | string
const state = reactive<{
  selectedRowKeys: Key[];
}>({
  selectedRowKeys: [],
});
// let showUpload = ref<boolean>(false);

// 判断是否可以编辑
let editsParams = reactive({
  index: -1,
  dataIndex: ''
});
const editsProps = (column, index) => {
  let canEdit = editsParams[index] == index && editsParams[column['dataIndex']]
  return {
    // bordered: canEdit,
    // disabled: !canEdit
  }
}
const setCellEdit = (column, index) => {
  editsParams.index = index;
  editsParams.dataIndex = column['dataIndex'];
}

// 新增、删除行
const addDelete = (type: number) => {
  if(type == 1) {
    let addObj = {};
    addObj[props.rowKey] =  Date.now()
    props.data.push(addObj)
  }
  else if(type == 2) {
    let tdata = cloneDeep(props.data)
    tdata = tdata.filter(item => !state.selectedRowKeys.includes(item[props.rowKey]))
    props.data.splice(0, props.data.length, ...tdata)
  }
}

// 判断是否禁用
const isDiabled = (column) => {
  let componentProps = column['componentProps'] || {}
  if(props.check == true || componentProps['disabled'] == true) {
    return true
  }
  return false
}

// 选中事件
const onSelectChange = (selectedRowKeys: Key[]) => {
  state.selectedRowKeys = selectedRowKeys;
}; 


</script>

<style lang="scss">
.u-edit-table-box {
  .u-common-table {
    .ant-table-thead {
      .ant-table-cell {
        background: #F2F2F2;
      }
    }
  }
  .ant-table-cell {
    .ant-select {
      width: 100%
    }
    .ant-input-number {
      @extend .ant-select
    }
    .ant-picker {
      @extend .ant-select
    }
  }
}

</style>